/*----------------------------------------------------------------
// 文件功能描述：样式表正文
// author：Inthur
// 时间：2018/08/01
// 修改标识：
// 修改描述：
//----------------------------------------------------------------*/
@import "_public";

//播放条
.in-controls{
    padding: 0.16rem 0.32rem 0.34rem 1.24rem;
    width: 100%;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border-radius:0 0 0.6rem 0.6rem;
    background: #fff;
    position: relative;
    .in-play-btn{
        position: absolute;
        top: 0.16rem;
        left: 0.3rem;
        @include elementSize(0.72rem,0.72rem);
        border-radius: 50%;
        background: #33cc89 url(~@/assets/img/player/in-play.png) no-repeat center center;
        background-size: 0.26rem 0.26rem;
        &.in-pause-btn{
            background-image: url(~@/assets/img/player/in-pause.png);
            background-size: 0.24rem 0.26rem;
        }
    }
    .in-bar{
        width: 100%;
        // @include elementSize(100%,1rem);
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        color: #adb9c7;
        font-size: 0.2rem;
        background: #ebeef2;
        padding: 0.3rem 1.14rem;
        position: relative;
        border-radius: 0.4rem;
        .in-current-time,
        .in-total-time{
            position: absolute;
            top: 0.26rem;
            height: 0.22rem;
            line-height: 0.22rem;
        }
        .in-current-time{
            left: 0.28rem;
        }
        .in-total-time{
            right: 0.28rem;
        }
        .in-progress{
            @include elementSize(100%,0.12rem);
            box-sizing:border-box;
            -webkit-box-sizing:border-box;
            background: #fff;
            border-radius: 0.08rem;
            position: relative;
            .in-elapse{
                position: absolute;
                left: 0;
                top: 0;
                @include elementSize(0,100%);
                background: #fff;
                border-radius: 0.7rem;
                .in-dot{
                    position: absolute;
                    right: -0.16rem;
                    top: -0.1rem;
                    @include elementSize(0.32rem,0.32rem);
                    border-radius: 50%;
                    background: #33cc89;
                }
            }
        }
    }
}
//播放器
.player{
    background: #ffd300 url(~@/assets/img/player/bg.png) no-repeat 0 0;
    background-size: 100% auto;
    width: 100%;
    min-height: 100vh;
    position: relative;
    padding-bottom: .4rem;
    // .player-bg{
    //     background: #33cc89 url(~@/assets/img/player/bg.png) no-repeat 0 bottom;
    //     background-size: 100% auto;
    //     @include elementSize(100%,8.4rem);
    // }
    // .player-body{
    //     @include elementSize(100%,auto);
    //     position: absolute;
    //     top: 0;
    //     left: 0;
    // }
    .bg{
        background-color: #ffffff;
    }
    .player-top{
        padding: 0.35rem 0.32rem;
        .book-btn{
            height: 0.64rem;
            line-height: 0.64rem;
            padding: 0 0.32rem 0 0.72rem;
            background: #ffd300 url(~@/assets/img/player/book.png) no-repeat 0 0;
            background-size: 0.54rem 0.64rem;
            font-size: 0.34rem;
            color: #844e13;
            font-weight: bold;
            border-radius: 0.08rem 0.36rem 0.36rem 0.08rem;
        }
    }
    .player-bbox{
        width: 6.86rem;
        margin: 0 auto;
        padding-top:1.52rem;
        position: relative;
        .player-chose{
            @include elementSize(100%,1.1rem);
            position: absolute;
            left: 0;
            top: 0.44rem;
            z-index: 5;
            background: url(~@/assets/img/player/title-s.png) no-repeat 0 0;
            background-size: 100% 100%;
            &.change{
                background-image: url(~@/assets/img/player/title-r.png);
            }
            span{
                @include elementSize(3.4rem,1.1rem);
            }
            // .left{
            //     background: url(~@/assets/img/player/btn-s.png) no-repeat center bottom;
            //     background-size: auto 0.84rem;
            //     &.chose{
            //         background-image: url(~@/assets/img/player/btn-s-c.png);
            //     }
            // }
            // .right{
            //     background: url(~@/assets/img/player/btn-r.png) no-repeat center bottom;
            //     background-size: auto 0.84rem;
            //     &.chose{
            //         background-image: url(~@/assets/img/player/btn-s-c.png);
            //     }
            // }
        }
    }
    .player-box{
        @include elementSize(6.86rem,8.32rem);
        box-shadow: 0 0.1rem#ffc400;
        -webkit-box-shadow: 0 0.1rem #ffc400;
        border-radius: 0 0 0.6rem 0.6rem;
        background: #fff;
        position: relative;
        padding: 0.34rem 0.32rem 0.32rem;
    }

    .player-main{
        @include elementSize(100%,100%);
        overflow: hidden;
        overflow-y: scroll;
        border-radius: 0 0 0.6rem 0.6rem;
        background: #fff url('') no-repeat 0 0;
        background-size: 100% 100%;
        &::-webkit-scrollbar{
            display:none;
        }
        -webkit-overflow-scrolling: touch;
        position: relative;
        .word{
            i,em{
                display: block;
                text-align: center;
                box-sizing: content-box;
                &.is-red{
                    color: red;
                }
            }
            i{
                font-size:0.24rem;
                height: 0.28rem;
                line-height: 0.28rem;
                color: #999;
            }
        }
        .poe-title{
            color: #000;
            font-size: 0.46rem;
            @include flexBox(center,wrap);
            // padding: 0.2rem 0 0;
            .word{
                width: 0.74rem;
                &.not-mast{
                    width: 0.6rem;
                }
                em{
                    font-weight: bold;
                }
            }
        }
        .poe-author{
            color: #666;
            font-size: 0.28rem;
            @include flexBox(center,wrap);
            .word{
                width: 0.62rem;
                i{
                    padding: 0.24rem 0 0.06rem;
                }
                em{
                    height: 0.32rem;
                    line-height: 0.32rem;
                }
            }
            .punc{
                width: auto;
            }
        }
        .poe-body{
            color: #333;
            font-size: 0.42rem;
            padding-bottom: 1.84rem;
            li{
                @include flexBox(center,wrap);
                // padding: 0 0.32rem;
            }
            .word{
                width: 0.74rem;
                &:last-child{
                    width: auto;
                }
                i{
                    padding: 0.3rem 0 0.08rem;
                }
                em{
                    height: 0.44rem;
                    line-height: 0.44rem;
                    // font-weight: bold;
                }
            }

        }

        &.is-look{
            -webkit-filter: blur(0.12rem);
            -moz-filter: blur(0.12rem);
            -ms-filter: blur(0.12rem);
            filter: blur(0.12rem);
        }
        // .look-mask{
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     z-index: 5;
        //     @include elementSize(100%,100%);
        //     background: rgba(255,255,255,0.8);
        // }
    }
    .player-tool{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 10;
        .gradient{
            @include elementSize(100%,0.6rem);
            background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));/* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); /* Firefox 3.6 - 15 */
            background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));/* 标准的语法（必须放在最后） */

        }
        .tool-mask{
            border-radius: 0 0 0.6rem 0.6rem;
            background: #fff;
            height: 1rem;
        }
        .look-btn{
            height: 0.96rem;
            font-size: 0.3rem;
            line-height: 0.6rem;
            text-align: center;
            font-weight: bold;
            position: relative;
            border-radius:0 0 0.6rem 0.6rem;
            background: #fff;
            padding-top: 0.1rem;
            box-sizing: content-box;
            span{
                position: absolute;
                top: 0.1rem;
                left: 50%;
                margin-left: -1rem;
                @include elementSize(2rem,0.6rem);
                background: #ebeef2;
                color: #666;
                border-radius: 0.34rem;
                &.is-look{
                    color: #33cc89;
                    background: #d6f5e7;
                }
            }
            em{
                color: #ff5e33;
            }
        }
    }
    .player-bottom{
        position: relative;
        padding: 0.1rem 0;
        // width: 100%;
        // position: absolute;
        // bottom: 0.2rem;
        // left: 0;
        .main-btn{
            padding-top:0.34rem;
            &.has-track{
                background:  url(~@/assets/img/player/track.gif) no-repeat center center;
                background-size: 90% auto;
            }
            .study-btn{
                @include elementSize(3.12rem,1.4rem);
                background: url(~@/assets/img/player/btn-study.png) no-repeat center center;
                background-size: 100% 100%;
                margin: 0 auto;
                position: relative;
                .switch{
                    @include elementSize(0.46rem,1.4rem);
                }
                .play-btn{
                    width:2.2rem;
                }
                span{
                    background: url(~@/assets/img/player/record.png) no-repeat center center;
                    background-size: 0.72rem 0.85rem;
                }
            }
            span{
                display: block;
                @include elementSize(1.4rem,1.4rem);
                background: #736ff4 url(~@/assets/img/player/record.png) no-repeat center center;
                background-size: 0.72rem 0.85rem;
                margin: 0 auto;
                border-radius: 50%;
                &.play{
                   background-image:  url(~@/assets/img/player/play.png);
                   background-size: 0.64rem 0.64rem;
                }
                &.stop{
                    background-image:  url(~@/assets/img/player/stop.png);
                    background-size: 0.64rem 0.64rem;
                }
                &.pause{
                    background-image:  url(~@/assets/img/player/pause.png);
                    background-size: 0.52rem 0.57rem;
                }
            }
            p{
                font-size: 0.24rem;
                color: #844e13;
                height: 0.58rem;
                line-height: 0.58rem;
                text-align: center;
            }
        }
        .setup{
            position: absolute;
            top: 0.68rem;
            left: 0.32rem;
            @include elementSize(0.9rem,0.9rem);
            background: #ffa800 url(~@/assets/img/player/setup.png) no-repeat center center;
            background-size: 0.44rem 0.44rem;
            border-radius: 50%;
        }
        .nav{
            position: absolute;
            top: 0.68rem;
            right: 0.32rem;
            @include elementSize(0.9rem,0.9rem);
            background: #ffa800 url(~@/assets/img/player/nav.png) no-repeat center center;
            background-size: 0.44rem 0.39rem;
            border-radius: 50%;
        }
        .repeat{
            position: absolute;
            top: 0.68rem;
            left: 0.32rem;
            @include elementSize(2rem,0.9rem);
            background: url(~@/assets/img/player/repeat.png) no-repeat center center;
            background-size: 100% 100%;
        }
        .save{
            position: absolute;
            top: 0.68rem;
            right: 0.32rem;
            @include elementSize(2rem,0.9rem);
            background: url(~@/assets/img/player/save.png) no-repeat center center;
            background-size: 100% 100%;
        }
    }
    .setup-box{
        .mask-close{
            @include elementSize(100%,100%);
        }
        .video-set{
            width: 100%;
            height: 5.1rem;
            padding: .6rem 0 0;
            position: absolute;
            bottom: 0;
            left: 0;
            border-radius:.35rem .35rem 0 0;
            background: #FFF;
            z-index: 550;
        }
        .setcol .tit{
            font-size: .28rem;
            height: .7rem;
            line-height: .7rem;
            color: #999;
            width: 100%;
            text-align: center;
        }
        .setcol .cont{
            padding:.1rem .5rem .4rem;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }
        .setloop .settingbtn{
            width: 2.05rem;
            height: .9rem;
            background: #eff1f3;
            border-radius: .45rem;
            line-height: .9rem;
            font-size: .3rem;
            color:#666;
            text-align: center;
            // font-weight:bold;
            transition: .4s all;
            -webkit-transition: .4s all;
        }
        .settime .settingbtn{
            width: 1.5rem;
            height: .8rem;
            background: #eff1f3;
            border-radius: .45rem;
            line-height: .8rem;
            font-size: .3rem;
            color:#666;
            text-align: center;
            // font-weight:bold;
            transition: .4s all;
            -webkit-transition: .4s all;
        }
        .settingbtn.active{
            background: #33cc89;
            color: #fff;
        }
    }


}
//分数遮罩
.player-score{
    .mask-close{
        @include elementSize(100%,100%);
    }
}

